// Menu and Messages

// NOTE:
// Our Menu is based on the dat.gui by https://code.google.com/p/dat-gui/

	var i = 1;
	var gui = new dat.GUI({ autoPlace: false });
	var guiContainer = document.getElementById('gui');
	var textColor = 0x2fa1d6;
	var titleMesh;
	var gameOverMesh1,gameOverMesh2;
	var speedMin = 300;
	var speedStep = 50;
	var speedStepMax = 50;

	// Parameters for GUI
	var parameters = 
	{
		a: 16, // Numeric slider for Height
		b: 16, // Numeric slider for Width
		d: true, // Boolean (Checkbox for Music on/off)
		d2: false, // Boolean (Checkbox for Mute)
		e: 36, // Numeric slider for dropinterval
		f: startGame,
	};
	
	function updateFieldSize() {
			removeCubes();
			fieldHeight=parameters.a*2; 	// Resize the field with the player-choosen values.
			fieldWidth=parameters.b;
			addCubes();
	}
	
	function startGame() {
			guiContainer.style.display = 'none'; 		// game with player-choosen
			gameStarted=true; 			// drop-speed.
			dropInterval=(speedMin+speedStepMax*speedStep-parameters.e*speedStep); 
			running = setTimeout(function(){ playersMovement(true)}, dropInterval);
	}

	// Gameover Message
	function showGameOver(){
		// Variables for building 3D text
		var materialFront = new THREE.MeshBasicMaterial( { color: textColor } );
		var materialSide = new THREE.MeshBasicMaterial( { color: 0x000000 } );
		var materialArray = [ materialFront, materialSide ];

		// add 3D text (Hint: Hit enter to resume)
		var textGeom = new THREE.TextGeometry( "HIT ENTER TO RESUME", 
		{
			size: 10, height: 4, curveSegments: 3,
			font: "helvetiker", weight: "bold", style: "normal",
			bevelThickness: 1, bevelSize: 2, bevelEnabled: true,
			material: 0, extrudeMaterial: 1
		});					
		var textMaterial = new THREE.MeshFaceMaterial(materialArray);
		gameOverMesh1 = new THREE.Mesh(textGeom, textMaterial );
		textGeom.computeBoundingBox();
		var textWidth = textGeom.boundingBox.max.x - textGeom.boundingBox.min.x;
		gameOverMesh1.position.set(0, -80, 50 );
		textGeom.center();
		scene.add(gameOverMesh1);

		// add 3D text (Message: Game over)
		textGeom = new THREE.TextGeometry( "PLAYER "+(gameOver>1?'2':'1')+" GAME OVER", 
		{
			size: 30, height: 4, curveSegments: 3,
			font: "helvetiker", weight: "bold", style: "normal",
			bevelThickness: 1, bevelSize: 2, bevelEnabled: true,
			material: 0, extrudeMaterial: 1
		});					
		var textMaterial = new THREE.MeshFaceMaterial(materialArray);
		gameOverMesh2 = new THREE.Mesh(textGeom, textMaterial );
		textGeom.computeBoundingBox();
		var textWidth = textGeom.boundingBox.max.x - textGeom.boundingBox.min.x;
		gameOverMesh2.position.set(0, -50, 50 );
		textGeom.center();
		scene.add(gameOverMesh2);
	}


	// The Menu
	function showMenu(){
		guiContainer.appendChild(gui.domElement);
		
	
		// Variables for building 3D text
		var materialFront = new THREE.MeshBasicMaterial( { color: textColor } );
		var materialSide = new THREE.MeshBasicMaterial( { color: 0x222222 } );
		var materialArray = [ materialFront, materialSide ];

		// add 3D text ("Logo")
		var textGeom = new THREE.TextGeometry( "PVP - TETRIS", 
		{
			size: 30, height: 30, curveSegments: 3,
			font: "helvetiker", weight: "bold", style: "normal",
			bevelThickness: 5, bevelSize: 1, bevelEnabled: true,
			material: 0, extrudeMaterial: 1
		});			
		var textMaterial = new THREE.MeshFaceMaterial(materialArray);
		titleMesh = new THREE.Mesh(textGeom, textMaterial );
		textGeom.computeBoundingBox();
		var textWidth = textGeom.boundingBox.max.x - textGeom.boundingBox.min.x;
		titleMesh.position.set(0, 175, 50 );
		textGeom.center();
		scene.add(titleMesh);

		// Call update-funtion, which animates the 3D texts and waits for input
		update();

		// Build the Menu:
		// gui.add( parameters )
		gui.add( parameters, 'a' ).min(8).max(24).step(1).name('height of field:').onFinishChange(updateFieldSize);
		gui.add( parameters, 'b' ).min(8).max(24).step(1).name('width of field:').onFinishChange(updateFieldSize);
		gui.add( parameters, 'd' ).name('play music');
		gui.add( parameters, 'd2' ).name('mute all sounds');
		gui.add( parameters, 'e' ).min(16).max(speedStepMax).step(1).name('speed:');
		gui.add( parameters, 'f' ).name('<b> --- start game --- </b>');

		// Show the Menu
		gui.open();
	}


	// Animates the (last added) Text and waits for Input
	function update(){
		// Turns Music on/off according to menu-checkbox or game-state
		if (_playMusic != parameters.d) if (parameters.d) music.play();
										else music.pause();
		_playMusic = parameters.d;
										
		if (_playSounds != parameters.d2) if (parameters.d2) music.pause();
										else if (_playMusic) music.play();
		_playSounds = !parameters.d2;
		
		guiContainer.style.top = window.innerHeight/2-196/2;
		guiContainer.style.left = window.innerWidth/2-160;
		
		setTimeout( function() { requestAnimationFrame( update ); }, 1000 / 60 );

		if (Key.isDown(Key.ENTER)) {
			if (gameOver>0) resetGame();
			if (guiContainer.style.display != 'none') startGame();
		}
	}
	
	function onDocumentMouseMove(event) {
		// Rotate the last added Text
		var mouse3D = new THREE.Vector3(
		 (window.innerWidth/2 - event.clientX) * -.1,
		 (window.innerHeight/2 - event.clientY) * .1,
		 0
		 );
		titleMesh.up = new THREE.Vector3(0,0,1);
		titleMesh.lookAt( mouse3D );
		titleMesh.rotation.x = Math.PI / 3;
	}